<div class="containerStyle">
  <h3>描述</h3>
  <p>表格加载数据失败，结合tiColspan指令和ti3-table-loadfail样式类实现。</p>
  <h3>示例</h3>

  <h4>大表格(默认表格)</h4>
  <br /><br />
  <ti-table [(displayedData)]="displayed" [srcData]="srcData" [columns]="columns">
    <table>
      <thead>
        <tr>
          <th tiOverflow *ngFor="let column of columns" width="{{column.width}}">{{column.title}}</th>
        </tr>
      </thead>
      <tbody *ngIf="status !== 404">
        <!--注意:ngFor中的displayed数据与displayedData传入的数据一致, 初始化设置为[]即可-->
        <tr *ngFor="let row of displayed">
          <td tiOverflow>{{row.firstName}}</td>
          <td tiOverflow>{{row.lastName}}</td>
          <td tiOverflow>{{row.age}}</td>
          <td tiOverflow>{{row.balance}}</td>
          <td tiOverflow>{{row.email}}</td>
        </tr>
      </tbody>
      <tbody *ngIf="status === 404">
        <tr class="ti3-table-loadfail">
          <td tiColspan>
            <span>{{failLoadInfo}}</span>
            <a href="javascript:void(0)" (click)="reloadFn()">{{reloadInfo}}</a>
          </td>
        </tr>
      </tbody>
    </table>
  </ti-table>
  <br /><br /><br /><br />
  <h4>小表格</h4>
  <br /><br />
  <ti-table [(displayedData)]="displayed" [srcData]="srcData" [columns]="columns" class="ti3-table-small">
    <table>
      <thead>
        <tr>
          <th *ngFor="let column of columns" width="{{column.width}}">{{column.title}}</th>
        </tr>
      </thead>
      <tbody *ngIf="status !== 404">
        <!--注意:ngFor中的displayed数据与displayedData传入的数据一致, 初始化设置为[]即可-->
        <tr *ngFor="let row of displayed">
          <td>{{row.firstName}}</td>
          <td>{{row.lastName}}</td>
          <td>{{row.age}}</td>
          <td>{{row.balance}}</td>
          <td>{{row.email}}</td>
        </tr>
      </tbody>
      <tbody *ngIf="status === 404">
        <tr class="ti3-table-loadfail">
          <td tiColspan>
            <span>{{failLoadInfo}}</span>
            <a href="javascript:void(0)" (click)="reloadFn()">{{reloadInfo}}</a>
          </td>
        </tr>
      </tbody>
    </table>
  </ti-table>
</div>
